<template>
  <div class="home">
    <div class="step_">
      <el-steps :active="4">
        <el-step title="步骤 1" description="添加商品基本信息"></el-step>
        <el-step title="步骤 2" description="添加商品参数"></el-step>
        <el-step title="步骤 3" description="添加商品介绍"></el-step>
        <el-step title="步骤 4" description="添加商品图片"></el-step>
      </el-steps>
    </div>

    <div class="addimg">
      <h3 class="sty_">注意：图片的名字不能带中文字符</h3>

      <form :action='urlimg+addclass_' method="post" enctype="multipart/form-data" target="id_iframe">
        <div class="anti_" >
          <div>
            <span> 商品缩略图：</span>
            <img :src="thumbnail?thumbnail:img" ref="img_" alt="" class="el_img"/>
            <input name="goodsid" :value="Obtaingoodsflag" style=" display: none"/>
            <input ref="list" @change="onFileChange($event)"  type='file' name="thumbnail"
                   accept='image/jpeg image/x-png' class=" pic_add"/>
          </div>
          <div>
            <span> 商品图片1：</span>
            <img :src="one?one:img" ref="img_" alt="" class="el_img"/>
            <input ref="list" @change="onFileChange($event)" type='file'  name="1" accept='image/jpeg image/x-png'
                   class=" pic_add"/>
          </div>
          <div>
            <span> 商品图片2：</span>
            <img :src="two?two:img" ref="img_" alt="" class="el_img"/>
            <input ref="list" @change="onFileChange($event)"  type='file' name="2" accept='image/jpeg image/x-png'
                   class=" pic_add"/>
          </div>
        </div>
        <div class="anti_">
          <div>
            <span> 商品图片3：</span>
            <img :src="three?three:img" ref="img_" alt="" class="el_img"/>
            <input ref="list" @change="onFileChange($event)"  type='file' name="3" accept='image/jpeg image/x-png'
                   class=" pic_add"/>
          </div>
          <div>
            <span> 商品图片4：</span>
            <img :src="four?four:img" ref="img_" alt="" class="el_img"/>
            <input ref="list" @change="onFileChange($event)"  type='file' name="4" accept='image/jpeg image/x-png'
                   class=" pic_add"/>
          </div>
          <div>
            <span> 商品图片5：</span>
            <img :src="five?five:img" ref="img_" alt="" class="el_img"/>
            <input ref="list" @change="onFileChange($event)"  type='file' name="5" accept='image/jpeg image/x-png'
                   class=" pic_add"/>
          </div>
        </div>
        <button type="submit" class="ll_button" @click="submitclassimg">确 定</button>
        <el-button type="danger" class="ll_button_la" @click="fanhui" >退出</el-button>
      </form>
    </div>
    <iframe id="id_iframe" name="id_iframe" style="display:none;"></iframe>
  </div>
</template>
<script>
  import  img from  "~/timg.jpg";
  import {
    mapGetters
  } from 'vuex'
  export default {
    components: {
      mapGetters,
    },
    data(){
      return {
        img,
        thumbnail: '',
        one: '',
        two: '',
        three: '',
        four: '',
        five: '',
        addclass_: 'uploadimg?Authorization='+this.$store.state.attribute.token,
        aimg: img,
        yuming: this.$IMG,
        urlimg: this.$DN,
        llimg: [],
        labelPosition: 'right',
        formLabelWidth: "120px",
      }
    },
    methods: {
      onFileChange(e) {
        var URL = window.URL || window.webkitURL;
        var imgURL = URL.createObjectURL(e.target.files[0]);
        var img_url = e.target;
        const isLt2M = img_url.files[0].size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.$message.error('或者上传头像图片大小不能超过 2MB!');
        } else {
          e.target.parentNode.children[1].src = imgURL
        }
      },
      submitclassimg(){
        this.update();
      },
      fanhui(){
        this.$store.commit('goodsflag', 0);
        this.$store.commit('Deposit', []);
        this.$router.push('./mygoods');
      },
      update(){
        setTimeout(() => {
          var d = window.frames["id_iframe"];
          if (d) {
            var dataall = JSON.parse(d.document.getElementsByTagName('pre')[0].innerHTML);
            this.$h.dataSuccess(dataall,this);
          } else {
            this.update();
          }
        }, 500);
      },
    },
    watch: {},
    computed: {
      ...mapGetters([
        'Obtaingoodsflag',
        "seegoods",
      ]),
    },
    created(){
      console.log(this.seegoods);

      if (this.seegoods.length != 0) {
        var carrus = JSON.parse(this.seegoods.carousel);
        this.thumbnail = this.yuming + carrus.thumbnail;
        this.one = this.yuming + carrus[1];
        this.two = this.yuming +  carrus[2];
        this.three = this.yuming + carrus[3];
        this.four = this.yuming + carrus[4];
        this.five = this.yuming +  carrus[5];
      }else{
//        this.thumbnail = this.img;
//        this.one = this.img;
//        this.two = this.img;
//        this.three = this.img;
//        this.four = this.img;
//        this.five = this.img;
      }
    },
    mounted(){

      //生命周期
    }
  }
</script>
<style scoped>
  .home {
    width: 100%;
    height: 100%;
  }

  .margin_content {
    width: 100%;
    height: 100%;
  }

  .step_ {
    width: 70%;
    height: 75px;
  }

  .addimg {
    width: 90%;
    height: 80%;
    margin-top: 1%;
    margin: auto;
  }

  .anti_ div {
    height: 270px;
    width: 79%;
  }

  .anti_ div span {
    font-size: 20px;
  }
.sty_{
  display: block;
  width:100%;
  height:20px;
}
  .anti_ {
    width: 49%;
    height: 100%;
    float: left;
  }

  .el_img {
    width: 250px;
    height: 138px;
    display: block;
    margin: auto;
    background-size: 100% 100%;
    border: 1px solid #d1d1d1;
  }

  .ll_button_la {
    /*margin-left: 40%;*/
    width: 147px;
  }

  .ll_button {
    margin-left: 40%;
    margin-top: 5%;
    /*margin: auto;*/
    width: 96px;
    display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    -webkit-appearance: none;
    text-align: center;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: 0;
    -webkit-transition: .1s;
    transition: .1s;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
    color: #fff;
    background-color: #409EFF;
    border-color: #409EFF;
  }

  .pic_add {
    width: 350px;
    /* height: 300px; */
    height: 138px;
    /*opacity: 0;*/
    /*display: block;*/
    position: relative;
    /* bottom: 300px; */
     /*background: red;*/
    bottom: 138px;
    /* opacity: -1; */
    z-index: 9999;
    float: right;
    opacity: 0;
  }

  .el-row {
    margin-bottom: 20px;

  &
  :last-child {
    margin-bottom: 0;
  }

  }
  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    /*background: #d3dce6;*/
  }

  .bg-purple-light {
    /*background: #e5e9f2;*/
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
